<template>
    <div class="menu">
        <el-table style="width: 100%; margin-bottom: 20px" row-key="id" border :data="permissionList">
            <el-table-column prop="name" label="名称" />
            <el-table-column prop="code" label="权限值" />
            <el-table-column prop="updateTime" label="修改时间" />
            <el-table-column label="操作" width="280">
                <template #default="{ row }">
                    <el-button type="primary" icon="User" size="small" :disabled="row.level == 4"
                        @click="addMenu(row)">{{ row.level == 3 ?
                            '添加功能' : '添加菜单' }}</el-button>
                    <el-button type="primary" icon="Edit" size="small" :disabled="row.level == 1"
                        @click="editMenu(row)">编辑</el-button>
                    <el-button type="danger" icon="Delete" size="small" :disabled="row.level == 1"
                        @click="deleteMenu(row.id)">删除</el-button>
                </template>
            </el-table-column>

        </el-table>
        <el-dialog v-model="dialogFormVisible" :title="menuData.id ? '修改菜单' : '添加菜单'" width="500">
            <el-form>
                <el-form-item label="名称">
                    <el-input v-model="menuData.name" />
                </el-form-item>
                <el-form-item label="权限">
                    <el-input v-model="menuData.code" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="confirmClick">
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { reqAllPermission, reqAddOrUpdateMenu, reqRemoveMenu } from '@/api/acl/menu/index'
const permissionList = ref([])
const dialogFormVisible = ref(false)
const menuData = ref<any>({
    code: '',
    level: '',
    pid: '',
    name: ''
})
onMounted(() => {
    getAllPermission()
})
const getAllPermission = async () => {
    const res = await reqAllPermission()
    if (res.code == 200) {
        permissionList.value = res.data
    }
}
const addMenu = (row: any) => {
    Object.assign(menuData.value, {
        code: '',
        level: '',
        pid: '',
        name: '',
        id: 0
    })
    menuData.value.level = row.level + 1
    menuData.value.pid = row.id
    dialogFormVisible.value = true
}
const editMenu = (row: any) => {
    dialogFormVisible.value = true
    Object.assign(menuData.value, row)
}
const confirmClick = async () => {
    const res = await reqAddOrUpdateMenu(menuData.value)
    if (res.code == 200) {
        getAllPermission()
        dialogFormVisible.value = false
    }
}
const deleteMenu = async (id: string) => {
    await reqRemoveMenu(id)
    getAllPermission()

}
</script>

<style lang="scss" scoped>
.menu {
    padding: 15px;
}
</style>